<template>
  <div id="home">
    <nav-bar>
      <template v-slot:left><i class="iconfont icon-shouye"></i></template>
      <template v-slot:default>商城首页</template>
      <template v-slot:right></template>
    </nav-bar>

    <tab-control v-show="isTabFixed" :titles="['畅销', '新书', '精选']" @tabClick="tabClick"></tab-control>

    <div class="wrapper">
      <div class="content">
        <div ref="banref">
          <!-- Banner -->
          <home-swiper :banners="banners"></home-swiper>

          <!-- Recommend goods -->
          <recommend-view :recommends="recommends"></recommend-view>
        </div>
        <!-- Tab -->
        <tab-control :titles="['畅销', '新书', '精选']" @tabClick="tabClick"></tab-control>

        <!-- Show goods -->
        <goods-list :goods="showGoods"></goods-list>
      </div>
    </div>

    <back-top v-show="isTabFixed" @bTop="bTop"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import HomeSwiper from "./ChildComps/HomeSwiper";
import RecommendView from "./ChildComps/RecommendView";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from "components/content/goods/GoodsList";
import BackTop from "components/common/backtop/BackTop";

import {getHomeAllData, getHomeGoods} from "network/home.js"
import BScroll from "better-scroll"

import {ref, reactive, toRefs, computed, onMounted, watchEffect, nextTick} from "vue";

export default {
  name: "Home",
  components: {
    NavBar, HomeSwiper, RecommendView, TabControl, GoodsList, BackTop
  },

  setup() {
    // 轮播图
    const banners = ref([])
    // 推荐商品
    const recommends = ref([])
    // 畅销 新书 精选
    const goods = reactive({
      sales: {page: 1, list: []},
      new: {page: 1, list: []},
      recommend: {page: 1, list: []},
    })
    // 当前 tab 类型
    let currentType = ref('sales')
    const showGoods = computed(() => goods[currentType.value].list)

    // 子传父 tabIndex
    const tabClick = index => {
      currentType.value = ['sales', 'new', 'recommend'][index]
      nextTick(() => bscroll && bscroll.refresh())
    }

    // 滚动组件 npm i better-scroll -S
    let bscroll = ref(null)
    let isTabFixed = ref(false)
    let banref = ref(null)

    // 回到顶部
    const bTop = () => bscroll.scrollTo(0, 0, 500)
    onMounted(() => {
      getHomeAllData().then(res => {
        banners.value = res.slides
        recommends.value = res.goods.data
      })
      getHomeGoods('sales').then(res => goods.sales.list = res.goods.data)
      getHomeGoods('recommend').then(res => goods.recommend.list = res.goods.data)
      getHomeGoods('new').then(res => goods.new.list = res.goods.data)
      // 滚动插件
      bscroll = new BScroll(document.querySelector('.wrapper'), {
        probeType: 3,  // 0, 1, 2, 3, 3 只要在运运就触发scroll事件
        click: true, // 是否允许点击
        pullUpLoad: true //上拉加载更多， 默认是false
      });
      // 滚动监听
      bscroll.on('scroll', position => {
        isTabFixed.value = -position.y > banref.value.offsetHeight
      })
      // 上拉加载
      bscroll.on('pullingUp', () => {
        getHomeGoods(currentType.value, ++goods[currentType.value].page).then(res => goods[currentType.value].list.push(...res.goods.data))
        bscroll.finishPullUp()
        bscroll.refresh()
      })

    })

    watchEffect(() => {
      nextTick(() => {
        bscroll && bscroll.refresh()
      })
    })

    return {
      banners, recommends, tabClick, showGoods, isTabFixed, banref, bTop
    }
  }
}
</script>

<style scoped lang="scss">
#home {
  position: relative;
  height: 100vh;

  .wrapper {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow: hidden;
  }
}
</style>